*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Gill Sans MT', 'Verdana',Calibri;
}
p{
    font-family: 'PT Sans';
    font-weight: light;
}
header{
    width: 100%;
    height: 50%;
    min-height: 235px;
    background-color:#2196F3;
}
h2{
    font-family: 'Rubik',cursive;
    font-weight: 600;
}
.nav{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    padding-top: 5px;
    padding-left: 15px;
    transition: all 0.5s ease;
}
.nav.active{
    background: #144067;
    position: fixed;
    opacity: 90%;
    z-index: 2;
}
.nav.active a:hover{
    color: #2475BE;
}
.space.active{
    height: 55px;
}
.logo{
    background: url(../Media/Logo.png) no-repeat center;
    background-size: contain;
    width: 20%;
    min-width: 120px;
    height: 40px;
    transition: all 0.5s ease-in-out;
}
.logo:hover{
    transform: scale(0.95);
}
.menu{
    display: flex;
    flex-wrap: wrap;
}
.menu li{
    list-style: none;
    margin: 10px;
    margin-right: 30px;
}
.menu li a{
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.5s ease;
    
}
.menu li a:hover{
    padding: 5px;
    background: #fff;
    color: #144067;
    border-radius: 10px;
}
.titulo{
    text-align: center;
    color: #144067;
    font-family: 'Rubik', cursive;
    font-size: calc(15pt + 2vw);
    font-weight: 800;
}
.Words{
    font-style: normal;
    color: #8ed2ff;
}
.contenedor-redes{
    width: 30%;
    max-width: 265px;
    margin: auto;
    margin-top: 3vh;
    color: #c8f4ff;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.contenedor-redes .fab:hover{
    transform: scale(1.3);
    color: rgb(255, 255, 255);
}
.Wave1{
    width: 100%;
    height: 105px;
    background: url(../Media/svg.svg);
    background-size: 100% 100%;
    animation: wave 6s linear infinite;
}
@keyframes wave {
    0%{
        background-position: 99vw;
    }
    100%{
        background-position: 1vw;
    }
}
.GeneralInfo{
    display: flex;
    width: 90%;
    margin: auto;
    margin-top: 2em;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.ImagenPágina{
    background: url(../Media/1.jpg) no-repeat center;
    width: 35%;
    min-width: 300px;
    height: 200px;
    background-size: 100% 100%;
    margin: 10px;
    margin-left: 0;
}
.InfoPágina{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 50%;
    min-width: 340px;
    margin: 10px;
    padding: 10px;
    padding-left: 0;
    padding-top: 0;
}
.InfoPágina h2{
    width: fit-content;
    margin-bottom: 1em;
    text-align: center;
    font-family: 'Rubik',cursive;
    font-weight: 600;
}
.Underline::after{
    content: '';
    height: 3px;
    width: 45%;
    margin: auto;
    margin-top: 4px;
    background-color: black;
    display: block;
    transition: .5s ease-in-out;
}
.Underline:hover:after{
    width: 100%;
}
.PersonalInfo{
    display: grid;
    width: 90%;
    margin: auto;
    margin-top: 50px;
    gap: 50px;
    grid-template-columns: 25% 35% 35%;
    grid-template-rows: 400px;
    grid-template-areas: 
    "Imagen Info Skills";
}
.ImagenPersonal{
    grid-area: Imagen;
    background: url(../Media/2.jpg);
    background-size: 100% 100%;
    min-width: 300px;
}
.MyData{
    grid-area: Info;
}
.Coment{
    width: 60px;
    height: 35px;
    padding: 2px;
    background-color: #f1b614;
    clip-path: polygon(0% 0%, 100% 0%, 100% 77%, 37% 77%, 16% 100%, 16% 77%, 0 77%);
    font-family:'Oswald',cursive;
    font-weight: 600;
}
.Coment p{
    text-align: center;
    color:#fff;
    font-size: 15px;
}
.presentation h2{
    margin-top: 20px;
    font-family: 'Rubik',cursive;
    font-weight: 400;
    font-size: 1.5em;
}
.presentation i{
    font-family: 'Oswald',monospace;
    letter-spacing:1px;
    font-style: normal;
}
hr{
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px #475a6dbe solid;
}
.Skills{
    grid-area: Skills;
    display: grid;
    gap: 3%;
    grid-template-columns: 90%;
    grid-template-rows: 22% 25% 25% 25%;
    grid-template-areas: 
    "h2"
    "Skill1"
    "Skill2"
    "Skill3";
}
.Skills h2{
    width: fit-content;
    font-family: 'Rubik',cursive;
    font-weight: 600;
    grid-area: h2;
    margin: auto;
    text-align: center;
}
.skillbox .uno{
    grid-area: Skill1;
}
.skillbox .dos{
    grid-area: Skill2;
}
.skillbox .tres{
    grid-area: Skill3;
}
.skillbox{
    border: 2px #475a6dbe solid;
    border-radius: 10px;
    height: fit-content;
    padding: 5px;
    display: flex;
    gap: 15px;
    align-items: center;
}
.skillbox i{
    width: 50px;
    font-size: 3rem;
    margin-left: 2%;
    margin-right: 2%;
    transition: all 0.2s ease-in-out;
}
.skillbox i:hover{
    filter: brightness(1.5) contrast(110%);
}
.fa-steam-square{
    background: -webkit-linear-gradient(#0a1a32,#1379ab);
    background-clip: content-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgb(29, 55, 94);
}
.fa-github-square{
    background: -webkit-linear-gradient(#145c8b,#0b152c);
    background-clip: content-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgb(16, 22, 31);
}
.fa-deviantart{
    background: -webkit-linear-gradient(#04d377,#237554);
    background-clip: content-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #04d377;

}
.skillbox p{
    font-family: "Rubik",Arial, Helvetica;
    font-weight:100;
}
.skillbox p a{
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    transition:all ease-in-out 0.25s;
}
.skillbox p a:hover{
    color: #f1b614;
}
.contador{
    width: 100%;
    margin-top: 2rem;
    background: linear-gradient(rgba(0, 0, 0, 0.658),rgba(0, 0, 0, 0.534)),url(../Media/10.jpg);
    background-size: cover;
    background-attachment:fixed;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: white;
}
.logro{
    display: flex;
    gap: 30px;
    margin: 15px;
}
.logro-icon{
    font-size: calc(200% + 2vw);
    margin-top: 10px;
    margin: auto;
}
.counter{
    font-family: "Oswald",cursive;
    font-weight: 400;
    font-size: 3em;
    text-align: center;
}
.Text-logro{
    font-family: "Rubik";
    font-weight: 100;
}
.Subtitle{
    width: 30%;
    margin: auto;
    text-align: center;
    margin-top: 2em;
}
.entradas{
    width: 90%;
    margin: auto;
    margin-top: 4em;
    display: grid;
    grid-gap: 5%;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: 1fr;
    grid-template-areas: 
    "Ent1 Ent2 Ent3";
}
.publicacion{
    cursor: pointer;
}
.Entrada{
    height: 200px;
    width: 25vw;
    min-width: 250px;
}
.Entrada.A{
    background: url(../Media/4.jpg);
    background-size: cover;
    grid-area: Ent1;
}
.Entrada.B{
    background: url(../Media/5.jpeg);
    background-size: 100% 100%;
    grid-area: Ent2;
}
.Entrada.C{
    background: url(../Media/6.jpg);
    background-size: cover;
    background-position: center;
    grid-area: Ent3;
}
.titulo-entrada{
    width: 25vw;
    min-width: 250px;
    background-color: #2475BE;
    color: #ffffff;
    padding: 2px;
    font-family: 'Rubik',Arial;
    font-weight: 600;
    text-align: center;
    font-size: 0.9em;
    line-height: 150%;
    border: 4px #2475BE solid;
    transition: all 0.15s ease-in-out;
}
.titulo-entrada:hover{
    background-color: #8bc0eca4;
    color:#1b5080;
}
.subrayado{
    text-decoration-line: underline;
}
.divboton{
    width: 100%;
    text-align: center;
}
button{
    margin-top: 2em;
    background:#1b5080;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 8px;
    padding-bottom: 8px;
    color: whitesmoke;
    font-family: 'Rubik',Arial;
    font-weight: 400;
    font-size: 1.1em;
    border: 2px#1b5080 solid;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}
button:hover{
    background-color: #ffffff;
    color: #1b5080;
    transform: scale(1.05) translateY(-10px);
}
.producto1{
    grid-area: Ent1;
}
.producto2{
    grid-area: Ent2;
}
.producto3{
    grid-area: Ent3;
}
.Article{
    height: 200px;
    width: 25vw;
    min-width: 250px;
}
.Article.a{
    background: url(../Media/7.jpg);
    background-size: cover;
}
.Article.b{
    background: url(../Media/11.jpg),
    url(../Media/12.jpg);
    background-size: contain;
}
.Article.c{
    background: url(../Media/9.jpg);
    background-size: cover;
}
.text-article{
    margin-top: 2em;
    font-family: 'PT Sans',Arial, Helvetica;
    font-size: 13px;
}
.shopboton{
    padding: 5px;
    font-size: 1em;
    font-family: 'PT Sans',Helvetica;
    font-weight: 400;
    background-color: #2196F3;
    border: 2px #2196F3 solid;
}
button i{
    margin:5px ;
}
.End{
    transform: rotate(180deg);
}
.Formulario{
    display: grid;
    background-color: #2196F3;
    padding: 15px;
    color: whitesmoke;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
}
.InfoContact{
    margin-left: 20px;
}
.Formulario h2{
    margin-bottom: 20px;
}
.Formulario p{
    font-family: "Rubik",Arial, Helvetica;
    font-weight:100;
    font-size: 0.8em;
}
.redes{
    margin-top: 15px;
    display: flex;
    align-items: center;
    font-size: 0.8em;
    color: #142e67;
}
.redes i{
    margin-right: 10px;
}
.redes p{
    font-size: 1.3em;
}
.redes a{
    margin-left: 10px;
    font-style: normal;
    font-weight: 600;
    text-decoration:underline;
    color: inherit;
    font-size: 1.3em;
}
form button{
    padding: 5px;
    font-size: 1em;
}
.FormContact h2{
    margin-left: 5%;
}
form button:hover{
    transform: none;
}
form div{
    text-align: center;
}
input{
    padding: 5px;
    border: 4px #144067 solid;
    background-color: #8ed2ff;
    font-family: 'Rubik';
    font-weight: lighter;
}
#mensaje{
    margin-top: 20px;
    width: 90%;
    height: 8em;
    padding: 5px;
    border: 4px #144067 solid;
    background-color: #8ed2ff;
    font-family: 'Rubik';
    font-weight: lighter;
}
textarea{
    resize: none;
}
::placeholder{
    color: #0a1a32;
    margin-top: -1px;
    padding-top:0 ;
    justify-content: start;
}
#Nombre{
    width: 45%;
}
#Correo{
    width: 45%;
}
@media screen and (max-width: 1160px)
{
.PersonalInfo{
    display: grid;
    width: 90%;
    gap: 30px;
    row-gap: 50px;
    justify-content:space-evenly;
    grid-template-columns: 300px calc(40vw);
    grid-template-rows: 400px 200px;
    grid-template-areas: 
    "Imagen Info"
    "Skills Skills";}
.Skills{
    grid-area: Skills;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 20% 80%;
    grid-template-areas: 
    "h2 h2 h2"
    "Skill1 Skill2 Skill3";
    justify-content: space-evenly;
    gap: 20px;
}
.skillbox{
    height: calc(100px - 1vw);
    font-size: calc(80% + 0.25vw);
}
.entradas{
    width: 90%;
    margin-top: 3em;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
    "Ent1 Ent2 Ent3";
}
.Entrada{
    height: calc(10vw + 50px);
    width: 25vw;
    min-width: 200px;}
.titulo-entrada{
    min-width: 200px;
    height: calc(100px - 1vw);
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.Article{
    height: calc(10vw + 50px);
    width: 25vw;
    min-width: 200px;
}
}
@media screen and (max-width:800px){
.InfoPágina{
    width: 100%;
}
.ImagenPágina{
    width: 80%;
    background-size: cover;
}
.contador{
    gap: 20px;
    flex-wrap: wrap;
}
.Formulario{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}
.Subtitle{
    width: 80%;
    margin: auto;
    text-align: center;
    margin-top: 2em;
}
.logo{
    width: 180px;
}
.menu li a{
    font-size: 15px;
    
}}
@media screen and (max-width:660px){
.Wave1{
    width: 100%;
    height: calc(5vw + 20px);
    background: url(../Media/svg.svg);
    background-size: 100% 100%;
    animation: wave 6s linear infinite;
}
.PersonalInfo{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 400px 300px 250px;
    grid-template-areas: 
    "Imagen"
    "Info"
    "Skills";
}
.ImagenPersonal{
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    background-size: cover;
}
.Skills{
    grid-area: Skills;
    display: grid;
    min-height: fit-content;
    grid-template-columns: 100%;
    grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr;
    grid-template-areas: 
    "h2"
    "Skill1"
    "Skill2"
    "Skill3";
    justify-content: space-evenly;
    gap: 20px;
}
.skillbox{
    height: max-content;
}
.entradas{
    width: 90%;
    margin: auto;
    margin-top: 4em;
    display: grid;
    grid-gap: 5%;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr 1.3fr;
    grid-template-areas: 
    "Ent1" 
    "Ent2" 
    "Ent3";
}
.Entrada{
    width: 80%;
    height: 200px;
    margin: auto;
}
.titulo-entrada{
    width: 80%;
    height: fit-content;
    margin: auto;
}
.Article{
    width: 80%;
    margin: auto;
    height: 200px;
}
.text-article{
    width: 80%;
    margin: auto;
    margin-top: 2em;
}
.logo{
    display: none;
}
.menu li a:hover{
    background: #fff;
    color: #144067;
    border-radius: 5px;
}
.menu li{
    list-style: none;
    margin: 10px;
    text-align: center;
}
.nav{
    width: 100%;
    justify-content: space-around;
}
.contenedor-redes{
    width: 50%;
    gap: 15px;
    justify-content: space-evenly;
}
.InfoContact{
    padding: 10px;
    font-size: 12px;
}
.MyData{
    font-size: 90%;
}
.Skills h2{
    width: fit-content;
    font-size: 5vw;
}
.Skills{
    margin-top: 35px;
}
#btnshop{
    margin: 10px;
}
}